<template>
<div class="music">
  <h3>Music</h3>
  <div>
<!--    1.声明式导航-->
<!--    <router-link to="/home/music/musicDetail/1" tag="button">周杰伦</router-link>-->
<!--    <router-link to="/home/music/musicDetail/2" tag="button">林俊杰</router-link>-->
<!--    <router-link to="/home/music/musicDetail/3" tag="button">陈奕迅</router-link>-->

<!--    2.编程式导航-->
    <button @click="$router.push({name:'MusicDetail',params:{id:'1',age:'11'}})">周杰伦</button>
    <button @click="$router.push({name:'MusicDetail',params:{id:'2',age:'12'}})">林俊杰</button>
    <button @click="$router.push({name:'MusicDetail',params:{id:'3',age:'14'}})">陈奕迅</button>
  </div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "Music"
}
</script>

<style scoped>
.music{
  background-color: bisque;
  height: 200px;
}
</style>